<template>
  <!-- 首页 新歌推荐组件 -->
  <div>
    <!-- 标题插槽 -->
    <slot name="title"></slot>

    <!-- PC端 新歌推荐内容 -->
    <ul class="new-song-xl">
      <li
        class="new-song-item"
        v-for="n in newsongs"
        :key="n.musicId"
        @click="addNewMusci(n)"
      >
        <div class="newsong-l">
          <div class="newsong-img">
            <img :src="n.icon" :alt="n.name" />
          </div>
        </div>
        <div class="newsong-r">
          <div class="newsong-name">{{ n.name }}</div>
          <div class="newsong-author">{{ n.author }}</div>
        </div>
        <div class="vip-angle">
          <img src="../../assets/index/vip.png" alt="会员尊享" />
        </div>
      </li>
      <li class="new-song-item disc">
        <div class="newsong-l disc">
          <div class="newsong-img disc">
            <img src="../../assets/newsong/disc_pink.png" />
          </div>
        </div>
        <router-link to="/cate" class="newsong-r disc">
          <a>查看更多</a>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </li>
    </ul>

    <!-- 移动端 新歌推荐内容 -->
    <el-carousel
      class="new-song-sm"
      arrow="never"
      height="5rem"
      @change="changeHandler"
      :autoplay="false"
      direction="vertical"
    >
      <el-carousel-item v-for="p in pages" :key="p">
        <ul class="new-song-card">
          <li
            class="new-song-item"
            @click="addNewMusci(n)"
            v-for="n in currentPage"
            :key="n.musicId"
          >
            <div class="newsong-l">
              <div class="newsong-img">
                <img :src="n.icon" :alt="n.name" />
              </div>
            </div>
            <div class="newsong-r">
              <div class="newsong-name">{{ n.name }}</div>
              <div class="newsong-author">{{ n.author }}</div>
            </div>
          </li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  name: "NewSong",
  computed: {
    /* 计算有多少页 */
    pages() {
      return Math.ceil(this.newsongs.length / 3);
    },

    /* 计算当前页的数据 */
    currentPage() {
      return this.newsongs.slice(this.offset * 3, (this.offset + 1) * 3);
    },
  },
  data() {
    return {
      /*新歌数据 */
      newsongs: [
        {
          musicId: 19,
          name: "一梦",
          src: "https://jsai.312jiah.com/yimeng.mp3",
          author: "阿云嘎",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/5E/AD/ChAKFGNp39KAILpFABMQrWTEiTU404.jpg@w_120,h_120",
        },
        {
          musicId: 20,
          name: "酿了一秋的甜",
          src: "https://jsai.312jiah.com/yiqiu.mp3",
          author: "楚小襄",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/44/B3/ChAKE2NgiYyAOLdsABLDh6FPvQQ003.jpg@w_120,h_120",
        },
        {
          musicId: 22,
          name: "路人甲",
          src: "https://jsai.312jiah.com/lurenjia.mp3",
          author: "灏灏灏仔",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/3A/36/ChAKFGNZ-pmAF16UAAD_sCQzorg749.jpg@w_120,h_120",
        },
        {
          musicId: 23,
          name: "曼陀山庄",
          src: "https://jsai.312jiah.com/mantuo.mp3",
          author: "许嵩",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/3A/82/ChAKFGNbkQOADyuCABKEYd8zNYk774.jpg@w_120,h_120",
        },
        {
          musicId: 24,
          name: "本能",
          src: "https://jsai.312jiah.com/benneng.mp3",
          author: "郭冠廷",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/5A/83/ChAKE2No0eaAAuUOABQBEK7vHkU627.jpg@w_120,h_120",
        },
        {
          musicId: 25,
          name: "We",
          src: "https://jsai.312jiah.com/We.mp3",
          author: "曹羊",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/44/B8/ChAKFGNgylqAWH7HAAr480ASSuk694.jpg@w_120,h_120",
        },
        {
          musicId: 26,
          name: "Better",
          src: "https://jsai.312jiah.com/Better.mp3",
          author: "叶喜儿",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/55/6F/ChAKE2Nn5MCAc2UYABwJiFxhlNA979.jpg@w_120,h_120",
        },
        {
          musicId: 27,
          name: "无法再靠近",
          src: "https://jsai.312jiah.com/wufazaikaojin.mp3",
          author: "王艺瑾",
          isPlay: false,
          islike: false,
          setout: true,
          icon: "https://img01.dmhmusic.com/0513/M00/5F/4B/ChAKFGNrVbuAVs8bABoh6b0Zs8M213.jpg@w_120,h_120",
        },
      ],

      /* 数据偏移 */
      offset: 0,
    };
  },
  methods: {
    /* 检查用户vip状态 */
    ...mapActions("music", ["checkVIP"]),
    /* 改变当前偏移索引 */
    changeHandler(e) {
      this.offset = e;
    },
    /* 检查用户vip  */
    addNewMusci(data) {
      this.checkVIP(data);
    },
  },
};
</script>

<style lang="less" scoped>
.new-song-xl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .new-song-item {
    position: relative;
    border-radius: 0.1rem;
    overflow: hidden;
    cursor: pointer;
    margin-top: 0.2rem;
    display: flex;
    width: 32%;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
    &:hover:not(.disc) .newsong-img img {
      transform: scale(1.1);
    }
    &:hover .newsong-r .newsong-name,
    &:hover .newsong-r.disc,
    &:hover .newsong-r a {
      color: #ffcff1;
    }
    &.disc {
      transition: all 0.5s;
      justify-content: space-around;
      &:hover img {
        transform: rotateZ(360deg);
      }
    }
    .newsong-l {
      &.disc {
        margin-left: 1rem;
      }
      .newsong-img {
        overflow: hidden;
        width: 2.222rem;
        height: 2.222rem;
        &.disc {
          width: 1.25rem;
          height: 1.25rem;
        }
        img {
          height: 100%;
          width: 100%;
          transition: all 0.5s;
        }
      }
    }
    .newsong-r {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &.disc {
        flex-direction: row;
      }
    }
    .vip-angle {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
.new-song-sm {
  display: none;

  .new-song-card {
    margin-top: 0.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    .new-song-item {
      display: flex;
      align-items: center;
      margin-top: 0.125rem;
      .newsong-l {
        .newsong-img {
          height: 1.5rem;
          width: 1.5rem;
          border-radius: 0.1rem;
          overflow: hidden;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .newsong-r {
        margin-left: 0.5rem;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .new-song-xl {
    display: none;
  }
  .new-song-sm {
    display: block;
  }
}
</style>